<template>
  <div class="register">
    <div class="register-block">
      <div class="register-title">
        <h1>账户注册</h1>
      </div>

      <div class="register-info">
        <el-form
          ref="registerForm"
          :model="registerForm"
          :rules="registerRules"
          label-position="top"
        >
          <div class="register-username">
            <el-form-item label="客户姓名" prop="username">
              <el-input
                type="text"
                maxlength="10"
                placeholder="请输入客户姓名"
                v-model="registerForm.username"
              />
            </el-form-item>
          </div>

          <div class="register-account">
            <el-form-item label="身份证号码" prop="userCard">
              <el-input
                type="text"
                maxlength="18"
                placeholder="请输入身份证号码"
                v-model="registerForm.userCard"
              />
            </el-form-item>
          </div>

          <div class="register-password">
            <el-form-item label="密码" prop="password">
              <el-input
                type="text"
                minlength="6"
                maxlength="10"
                placeholder="请输入密码(6-10位)"
                v-model="registerForm.password"
                show-password
              />
            </el-form-item>
          </div>

          <div class="register-password-confirm">
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input
                type="text"
                maxlength="10"
                minlength="6"
                placeholder="请确认密码"
                v-model="registerForm.confirmPassword"
                show-password
              />
            </el-form-item>
          </div>

          <div class="register-code">
            <el-form-item label="验证码" prop="code">
              <el-input
                type="text"
                maxlength="4"
                placeholder="请输入验证码"
                v-model="registerForm.code"
              />
              <el-image
                class="codeImg"
                @click="getCode()"
                :src="codeImgSrc"
                title="看不清?刷新试试"
              ></el-image>
            </el-form-item>
          </div>

          <div class="accept">
            <el-form-item>
              <el-checkbox v-model="registerForm.accept"></el-checkbox>
              请同意
              <span @click="openDialog()" class="accept-protocol"
                >注册协议</span
              >
              <el-dialog
                title="注册协议"
                :visible.sync="dialogIsOpen"
                width="50%"
                height="100%"
                :append-to-body="true"
              >
                略.....
              </el-dialog>
            </el-form-item>
          </div>

          <div class="register-button">
            <el-button type="primary" :loading="registerLoading"  v-on:click="onSubmit('registerForm')">
              <span v-if="!registerLoading">注 册</span>
              <span v-else>注 册 中...</span>
            </el-button>
          </div>

          <div class="toLogin-button">
            <router-link
              to="/login"
              style="text-decoration: none; color: black"
            >
              <el-button>返回</el-button>
            </router-link>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getCaptcha } from "@/api/user";
import { verifyIdCard } from "@/utils/tool";

export default {
  name: "Register",

  data() {
    var checkConfirmPassword = (rule, value, callback) => {
      if (value === "") callback(new Error("请确认密码"));
      else if (value != this.registerForm.password)
        callback(new Error("两次输入密码不一致"));
      else callback();
    };

    return {
      codeImgSrc: "",
      registerForm: {
        username: "",
        userCard: "",
        password: "",
        confirmPassword: "",
        accept: false,
        code: "",
        uuid: "",
      },

      dialogIsOpen: false,

      registerRules: {
        username: [
          {
            required: true,
            message: "请输入客户姓名",
            trigger: "blur",
          },
        ],
        userCard: [
          {
            required: true,
            message: "请输入身份证号码",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          {
            required: true,
            validator: checkConfirmPassword,
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
      },

      registerLoading: false,
    };
  },

  created() {
    this.getCode();
  },

  methods: {
    getCode() {
      getCaptcha().then((res) => {
        this.codeImgSrc = "data:image/gif;base64," + res.img;
        this.registerForm.uuid = res.uuid;
      });
    },

    openDialog() {
      this.dialogIsOpen = true;
    },

    onSubmit(formName) {
      if (!this.registerForm.accept) {
        this.$message.error("请同意协议");
        return false;
      }

      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.registerLoading = true;
          if (verifyIdCard(this.registerForm.userCard)) {
            this.$store
              .dispatch("Register", this.registerForm)
              .then(() => {
                this.$message.success("注册成功,请登录");
                this.$router.push("/login").catch(() => {});
              })
              .catch(() => {
                this.registerLoading = false;
                this.getCode();
                return false;
              });
          } else {
            this.registerLoading = false;
            this.$message.error("身份证号码格式不正确");
          }
        } else {
          this.registerLoading = false;
          this.getCode();
          return false;
        }
      });
    },
  },
};
</script>

<style>
.register {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url("../assets/login.png");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}

.register-block {
  margin-top: 5%;
  margin-right: 12%;
  float: right;
  width: 350px;
  height: 680px;
  border: 1px solid #ddd;
  background: #fff;
}

.register-title {
  text-align: center;
  border-bottom: 1px solid #ddd;
  height: 40px;
  width: 350px;
}

.register-info {
  height: 610px;
  width: 320px;
  padding-top: 15px;
}

.register-info .el-form-item {
  margin-bottom: 5px;
  padding-left: 20px;
  padding-top: 10px;
}

.register-info .el-form-item label {
  padding-bottom: 0;
}

.register-info .el-form-item .el-input {
  width: 300px;
}

.register-code .el-form-item .el-input {
  width: 48%;
  float: left;
  display: block;
}

.codeImg {
  display: block;
  float: right;
  width: 50%;
  height: 40px;
}

.codeImg:hover {
  cursor: pointer;
}

.accept {
  margin-top: 13px;
  margin-left: 20px;
}

.accept-protocol:hover {
  color: #409eff;
  cursor: pointer;
}

.register-button,
.toLogin-button {
  display: inline-block;
  width: 100px;
  margin-left: 30px;
}

.register-button .el-button {
  width: 130px;
}

.toLogin-button .el-button {
  width: 130px;
  margin-left: 20px;
}
</style>
